<template>
  <div>
    <div>
      <el-table :data="sals"
                style="width: 100%">
        <el-table-column label="启用时间"
                         width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.createDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="基本工资"
                         width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.basicSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column label="奖金"
                         width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.bonus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="午餐补助"
                         width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.lunchSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column label="交通补助"
                         width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.trafficSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应发工资"
                         width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.allSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column label="养老金基数"
                         width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.pensionBase }}</span>
          </template>
        </el-table-column>
        <el-table-column label="养老金比率"
                         width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.pensionPer }}</span>
          </template>
        </el-table-column>
        <el-table-column label="医疗基数"
                         width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.medicalBase }}</span>
          </template>
        </el-table-column>
        <el-table-column label="医疗保险比率"
                         width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.medicalPer }}</span>
          </template>
        </el-table-column>
        <el-table-column label="公积金基数"
                         width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.accumulationFundBase }}</span>
          </template>
        </el-table-column>
        <el-table-column label="公积金比率"
                         width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.accumulationFundPer }}</span>
          </template>
        </el-table-column>
        <el-table-column label="名称"
                         width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover"
                        placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>住址: {{ scope.row.address }}</p>
              <div slot="reference"
                   class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini"
                       @click="showEditSalView(scope.row)">编辑</el-button>
            <el-button size="mini"
                       type="danger"
                       @click="deleteSal(scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div>

      <el-dialog :title="title"
                 :visible.sync="dialogVisible"
                 width="80%">
        <div>
          <el-form :model="sal"
                   :rules="rules"
                   ref="SalForm">
            <el-row>
              <el-col :span="6">
                <el-form-item label="基本工资:"
                              prop="basicSalary">
                  <el-input size="mini"
                            style="width: 150px"
                            prefix-icon="el-icon-edit"
                            v-model="sal.name"
                            placeholder="请输入基本工资"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="奖金:"
                              prop="bonus">
                  <el-input size="mini"
                            style="width: 150px"
                            prefix-icon="el-icon-edit"
                            v-model="sal.bonus"
                            placeholder="请输入奖金"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="午餐补助:"
                              prop="lunchSalary">
                  <el-input size="mini"
                            style="width: 150px"
                            prefix-icon="el-icon-edit"
                            v-model="sal.name"
                            placeholder="请输入午餐补助"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="6">
                <el-form-item label="交通补助:"
                              prop="trafficSalary">
                  <el-input size="mini"
                            style="width: 150px"
                            prefix-icon="el-icon-edit"
                            v-model="sal.trafficSalary"
                            placeholder="请输入交通补助"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="应发工资:"
                              prop="allSalary">
                  <el-input size="mini"
                            style="width: 150px"
                            prefix-icon="el-icon-edit"
                            v-model="sal.allSalary"
                            placeholder="请输入应发工资"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="养老金基数:"
                              prop="pensionBase">
                  <el-input size="mini"
                            style="width: 150px"
                            prefix-icon="el-icon-edit"
                            v-model="sal.pensionBase"
                            placeholder="请输入养老金基数"></el-input>
                </el-form-item>
              </el-col>

            </el-row>

            <el-row>
              <el-col :span="6">
                <el-form-item label="养老金比率:"
                              prop="pensionPer">
                  <el-input size="mini"
                            style="width: 150px"
                            prefix-icon="el-icon-edit"
                            v-model="sal.pensionPer"
                            placeholder="请输入养老金比率"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="医疗基数:"
                              prop="medicalBase">
                  <el-input size="mini"
                            style="width: 150px"
                            prefix-icon="el-icon-edit"
                            v-model="sal.medicalBase"
                            placeholder="请输入医疗基数"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="启用时间:"
                              prop="createDate">
                  <el-date-picker v-model="sal.createDate"
                                  size="mini"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  style="width: 130px;"
                                  placeholder="启用时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>

            </el-row>

            <el-row>
              <el-col :span="6">
                <el-form-item label="医疗保险比率:"
                              prop="medicalPer">
                  <el-input size="mini"
                            style="width: 150px"
                            prefix-icon="el-icon-edit"
                            v-model="sal.medicalPer"
                            placeholder="请输入医疗保险比率"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="公积金基数:"
                              prop="accumulationFundBase">
                  <el-input size="mini"
                            style="width: 150px"
                            prefix-icon="el-icon-edit"
                            v-model="sal.accumulationFundBase"
                            placeholder="请输入公积金基数"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="公积金比率:"
                              prop="accumulationFundPer">
                  <el-input size="mini"
                            style="width: 150px"
                            prefix-icon="el-icon-edit"
                            v-model="sal.accumulationFundPer"
                            placeholder="请输入公积金比率"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="名称:"
                              prop="name">
                  <el-input size="mini"
                            style="width: 150px"
                            prefix-icon="el-icon-edit"
                            v-model="sal.name"
                            placeholder="请输入名称"></el-input>
                </el-form-item>
              </el-col>

            </el-row>

          </el-form>
        </div>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="doAddSalTable">确 定</el-button>
        </span>
      </el-dialog>
    </div>

  </div>

</template>

<script>
export default {
  name: 'salSearch',
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      rules: {
        name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        gender: [{ required: true, message: '请输入性别', trigger: 'blur' }],
        birthday: [
          { required: true, message: '请输入出生日期', trigger: 'blur' },
        ],
        idCard: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          {
            pattern:
              /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: '身份证号码格式不正确',
            trigger: 'blur',
          },
        ],
        wedlock: [
          { required: true, message: '请输入婚姻状况', trigger: 'blur' },
        ],
        nationId: [{ required: true, message: '请输入您组', trigger: 'blur' }],
        nativePlace: [
          { required: true, message: '请输入籍贯', trigger: 'blur' },
        ],
        politicId: [
          { required: true, message: '请输入政治面貌', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '邮箱格式不正确',
            trigger: 'blur',
          },
        ],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
        address: [
          { required: true, message: '请输入员工地址', trigger: 'blur' },
        ],
        telephone: [
          { required: true, message: '请输入住宅电话', trigger: 'blur' },
        ],
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      total: 0,
      page: 1,
      keyword: '',
      size: 10,
      dialogVisible: false,
      total: '',
      title: '',
      sals: [],
      sal: {
        id: '',
        basicSalary: '',
        bonus: '',
        lunchSalary: '',
        trafficSalary: '',
        allSalary: '',
        pensionBase: '',
        pensionPer: '',
        createDate: '',
        medicalBase: '',
        medicalPer: '',
        accumulationFundBase: '',
        accumulationFundPer: '',
        name: '',
      },
      emptySal: {
        id: '',
        basicSalary: '',
        bonus: '',
        lunchSalary: '',
        trafficSalary: '',
        allSalary: '',
        pensionBase: '',
        pensionPer: '',
        createDate: '',
        medicalBase: '',
        medicalPer: '',
        accumulationFundBase: '',
        accumulationFundPer: '',
        name: '',
      },
    }
  },
  mounted() {
    this.initSals()
    //this.initData();
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
    },
    deleteSal(data) {
      this.$confirm(
        '此操作将永久删除【' + data.name + '】, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.deleteRequest('/salary/sob/' + data.id).then((resp) => {
            if (resp) {
              this.initSals()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    currentChange(currentPage) {
      this.page = currentPage
      this.initSals('advanced')
    },

    initSals(type) {
      this.loading = true
      let url = '/salary/sob/?page=' + this.page + '&size=' + this.size
      url += '&name=' + this.keyword

      this.getRequest(url).then((resp) => {
        this.loading = false
        if (resp) {
          console.log(resp)
          this.sals = resp.data
          this.total = resp.total
          console.log('=======sals======')
          console.log(this.sals)
          console.log('=======total======')
          console.log(this.total)
        }
      })
    },
    showEditSalView(data) {
      this.title = '编辑员工信息'
      this.sal = data
      this.dialogVisible = true
    },
    doAddSalTable() {
      if (this.sal.id) {
        this.$refs['SalForm'].validate((valid) => {
          if (valid) {
            this.putRequest('/salary/sob/update', this.sal).then((resp) => {
              if (resp) {
                this.dialogVisible = false
                this.initSals()
              }
            })
          }
        })
      } else {
        this.$refs['salForm'].validate((valid) => {
          if (valid) {
            this.postRequest('/salary/sob/add', this.sal).then((resp) => {
              if (resp) {
                this.dialogVisible = false

                this.initSals()
              }
            })
          }
        })
      }
    },
  },
}
</script>